<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
</head>
<body>
<div id="app">
    <div>
        <div class="little">
            <p>About password regulation</p>
            <a href="http://localhost:8080/ManageSystem/login.html"><button>Login</button></a>
        </div>
        <div class="big Sign">
            <h1>Sign up</h1>
            <form :model="SignUp">
                <div class="tips"></div>
                <input type="text" placeholder="姓名" v-model="SignUp.name"><br>
                <input type="text" placeholder="电子邮件" v-model="SignUp.email">
                <input type="button" :disabled=btnDisabled @click="sendEmail" v-model="btnText"></input><br>
                <input type="password" placeholder="密码" v-model="SignUp.password"><br>
                <div class="passwordTip"></div>
                <input type="password" placeholder="确认密码" v-model="confirmPassword" @blur="checkPassword"><br>
                <input type="text" placeholder="准入码" v-model="manageCode"><br>
                <div class="vCodeTip"></div>
                <input type="text" placeholder="验证码" v-model="vCode"><br>
                <el-button @click="Sign" >Sign up</el-button>
            </form>
        </div>
    </div>
</div>


<script src="js/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="js/axios-0.18.0.js"></script>

<script>


    new Vue({
            el: "#app",
        //     mounted() {
        // },

        methods: {
            Sign(){
                const vCodeTip = document.querySelector(".vCodeTip");
                if(!this.vCode_t) {
                    vCodeTip.innerText = "请先从邮箱获取验证码";
                }
                else {
                    if (this.vCode !== this.vCode_t) {
                        this.time-=1;
                        vCodeTip.innerText = "验证码错误,还有"+this.time+"次机会";
                        if(this.time === 0)
                            this.resetForm();
                        return
                    } else
                        vCodeTip.innerText = "";
                    axios({
                        method: "post",
                        url: "http://localhost:8080/ManageSystem/user/signCheck?managecode=" + this.manageCode,
                        data: this.SignUp
                    }).then(resp => {
                        if (resp.data !== "success")
                            document.querySelector(".tips").innerText = resp.data;
                        else {
                            document.querySelector(".tips").innerText = "";
                            alert("注册成功啦~");
                        }
                    })
                }
            },
            sendEmail(){
                let time = 60;
                this.btnDisabled=!this.btnDisabled;
                var _this = this;
                const clean = setInterval(function () {
                    time = time - 1;
                    _this.btnText = time+"秒后可重新获取";
                    if (time === 0) {
                        _this.btnDisabled=!_this.btnDisabled;
                        _this.btnText = "获取验证码";
                        clearInterval(clean);
                    }
                }, 1000);
                axios({
                    method: "post",
                    url: "http://localhost:8080/ManageSystem/user/sendEmail",
                    data: this.SignUp.email
                }).then(resp=>{
                    this.vCode_t = resp.data;
                })
            },
            checkPassword(){
                const passwordTip = document.querySelector(".passwordTip");
                if (this.SignUp.password !== this.confirmPassword) {
                    passwordTip.innerText = "两次密码不一致";
                } else
                    passwordTip.innerText = "";
            },
            resetForm(){
              this.SignUp.name='';
              this.SignUp.name='';
              this.SignUp.email='';
              this.SignUp.password='';
              this.manageCode='';
              this.manageCode='';
              this.confirmPassword='';
              this.vCode='';
              this.vCode_t='lonelysnow';
              this.btnDisabled=false;
              this.time=3;
              document.querySelector(".tips").innerText="";
              document.querySelector(".vCodeTip").innerText="";
              document.querySelector(".passwordTip").innerText="";
            },
        },
        data() {
            return {
                SignUp:{
                    name:'',
                    email:'',
                    password:'',
                },
                manageCode:'',
                confirmPassword:'',
                vCode:'',
                vCode_t:'lonelysnow',
                btnDisabled:false,
                btnText:'发送验证码',
                time:3,
            }
        }
    })

</script>

</body>
</html>